<template>
	<view class="c-check-box" :class="check ? 'active' : ''">
		<view class="c-check-box-check" v-show="check"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			check: {
				type: Boolean,
				default: false
			},
			//形状，circle-圆形，square-方形
			shape: {
				type: String,
				default: 'circle'
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.c-check-box {
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #d1d1d1;
		background-color: white;
		position: relative;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&-check {
			position: absolute;
			display: inline-block;
			width: 20rpx;
			height: 12rpx;
			border-width: 0 0 4rpx 4rpx;
			overflow: hidden;
			border-color: #fff;
			border-style: solid;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			left: 9rpx;
			top: 9rpx;
		}
	}
	
	.active {
		background-color: #1677ff !important;
	}
</style>
